<!--
 * @Author: gyp
 * @Date: 2020-05-11 09:13:28
 * @LastEditors: gyp
 * @LastEditTime: 2020-09-07 17:31:49
 * @Description: 巡检车辆列表
 * @FilePath: \sy_kjxc_web\src\views\screen\components\patrolcarList.vue
 -->
<template>
  <ul class="patrolcarList">
    <li class="patrolcarItem" v-for="(item, index) in data" :key="index">
      <div class="top">
        <div class="car" @click="onCarClick(item.devid, item.carCode, item.type)">
          <i class="el-icon-lock" v-if="item.isLocked" />
          {{ item.carCode }}
        </div>
        <div
          v-if="item.type !== '1'"
          class="status"
        >{{ item.jsonText && (item.lng || item.jsonText.lng) && (item.lat || item.jsonText.lat) && item.jsonText.speed && item.jsonText.speed > 0 ? '行驶中' : '暂停中'}}</div>
        <el-button  v-if="interStatus === 'outside' && item.type !== '1'" size="mini" class="bt-tool track" @click="track(item)">
          {{ item.isLocked ? '取消' : '跟踪'}}
        </el-button>
        <el-button  v-if="item.type === '1'" size="mini" class="bt-tool track" @click="locate(item)">{{ item.isLocked ? '取消' : '定位'}}</el-button>
      </div>
      <div class="center">
        <span class="platform">{{ item.parentName + item.name }}</span>
        <el-button
          v-if="interStatus === 'outside' &&  item.type !== '3'"
          size="mini"
          class="bt-tool"
          @click="monitor(item)"
        >监控</el-button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'patrolcar-list',
  props: ['data', 'interStatus'],
  methods: {
    monitor (row) {
      this.$emit('monitorCar', row);
    },
    locate (row) {
      this.$emit('onMarkerRight', row, 'locate');
    },
    track (row) {
      this.$emit('onMarkerRight', row, 'track');
    },
    onCarClick (devid, devName, devType) {
      this.$emit('onCarTrack', devid, devName, devType);
    }
  }
};
</script>
<style lang="less" scoped>
.patrolcarList {
  .patrolcarItem {
    padding: 9px 15px;
    border-bottom: solid 1px #2c58a6;
    color: #eee;
    font-size: 14px;
    .top {
      display: flex;
      .car {
        flex: 1.5;
        cursor: pointer;
        align-items: center;
        .el-icon-lock {
          color: #E91C02;
          font-size: 16px;
        }
        &:hover {
          color: #25f3e6;
        }
      }
      .status {
        flex: 1;
      }
    }
    .center {
      margin-top: 5px;
      display: flex;
      .platform {
        flex: 2.5;
      }
    }
    .bt-tool {
      background: #214682;
      border: solid 1px #2c58a6;
      color: #fda502;
      letter-spacing: 2px;
      padding: 6px 11px;
      &:hover {
        color: #fff;
      }
      &.track {
        color: #25f3e6;
        &:hover {
          color: #fff;
        }
      }
    }
  }
}
</style>
